<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>这是一个奇怪的网站</title>
<style>
   .red{
       color:red;
   }
    .line{
        text-decoration:underline;
    }
  
</style>
   


    <!-- 1引用vue文件,会在vue当前挂载一个vue文件 -->
    <script src="./js/vue2.js"></script>
</head>
<body>
    <div id="app">
      <p>{{msg}}</p>
     
      <!-- <a v-bind:href="'edit.html?id='+id">设置</a> -->
      <p v-bind:class="[red,hasline]">看看有没有样式</p>
      <img v-bind:src="img" alt=""> 
      <p :class="{red:hasRed}">是否有红色的样式</p>
      <button @click='hasRed=!hasRed'>切换样式</button>
      <p :style="{fontSize:fs+'px'}">你好世界</p>
       
    </div>
</body>
  <!-- 构造函数,创建vue对象 -->
   <script>
    let nbv =new Vue({
        // 指定模板.当指定模板之后，将来vm实例只能控制app结构，以后app结构内的操作vm可以实现，但是如果你的相关代码写在app结构外，将不会被处理   
    el:'#app',
    data:{
        msg:'我很好,勿念',
        img:'./images/avatar.jpg',
        id:10,
        red:'red',
        hasRed:true,
        hasline:'line',
        fs:50
      
    }
    })
     
   </script>

</html>